<template>
	<view>
		
		
		<!-- 订单分类 -->
		<view class="alert-pip" :style="{ height: tabHeight + 'px' }" v-if="orderClassification">
			
			<view class="pip-text relative">
				<image class="all-top" src="/static/home/all-top.png"></image>
				<view class="pip-item flex flex-wrap">
					
					<view class="item" v-for="(item,index) in 6" :key="index">
						展会门票
					</view>
					
				</view>
				
			</view>
			
		</view>
		
		

		<!-- 选择栏 -->
		<view class="choose-tab flex relative" :style="[{top:0 + 'px'}]">
			<view :class="['tab-item flex-sub',checked == index ? 'active':'']" v-for="(item,index) in tabbar"
				:key="index" @click="chooseTab(index)">
				{{item.name}}
			</view>
		</view>



		<!-- 订单列表 -->
		<swiper class="grace-tab-swiper-full" :current="swiperCurrentIndex" @change="swiperChange"
			:style="{ height: tabHeight + 'px' }">
			<swiper-item v-for="(item, newsIndex) in tabbar.length" :key="newsIndex">
				<scroll-view :data-scindex="newsIndex" @scrolltolower="scrollBottom" scroll-y="true"
					:style="{ height: tabHeight + 'px' }">

					<view class="order flex align-center flex-direction">


						<view class="order-item" v-for="(item,index) in 12" :key="index">
							<view class="item-top flex">
								<image class="top-img" src="/static/test/rb.jpeg"></image>
								<view class="top-text">
									<view class="text1 flex align-center justify-between">
										<text class="one">
											CHH门票展
										</text>
										<text class="two">
											￥4999.00
										</text>
										
									</view>
									<view class="text2 flex align-center justify-between" >
										<text class="one">
											188贵宾席
										</text>
										<text class="two">
											/共1张
										</text>
									</view>
								</view>
							</view>
							<view class="item-bottom flex">
								
								<view class="btn1">
									已支付
								</view>
								<view class="btn2">
									1天12小时32分钟后订单关闭
								</view>
								<view class="btn3 flex justify-center">
									<text class="btn-status">
										立即支付
									</text>
									
								</view>
								
							</view>

						</view>


					</view>



				</scroll-view>
			</swiper-item>
		</swiper>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				TabCur: undefined,
				swiperCurrentIndex: undefined,
				tabHeight: 466,
				
				orderClassification:false,//订单分类按钮


				checked: 0, //选中下标
				tabbar: [{
						id: 1,
						name: '全部'
					},
					{
						id: 2,
						name: '待付款'
					},
					{
						id: 3,
						name: '待成团'
					},
					{
						id: 4,
						name: '待核销'
					},
					{
						id: 5,
						name: '待发货'
					}
				]


			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		onLoad() {

		},
		onReady() {
			var that = this;
			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					console.log(windowHeight, '--手机高度')
					var dom = uni.createSelectorQuery().select('.choose-tab')
					dom.fields({
						size: true
					}, res => {
						if (!res) {
							return;
						}
						that.tabHeight = windowHeight;
					}).exec();
				}
			});
		},
		onShow() {



		},
		methods: {
			// 订单分类按钮
			checkClass(){
				console.log('订单分类点击')
				this.orderClassification = !this.orderClassification
			},
			// srcoll到底了
			scrollBottom() {
				console.log('已经到底了=====')
			},
			// 轮播图滑动
			swiperChange(e) {
				var index = e.detail.current;
				this.checked = index;
				this.swiperCurrentIndex = index;
			},
			chooseTab(index) {
				this.checked = index;
				this.swiperCurrentIndex = index;
				console.log(this.checked, '===checked')
			},
			jump() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.test.orderDetail,
					query: {
						a: 0
					}
				})
			},
			// 返回上一页
			BackPage() {
				console.log('是否可以点击')
				uni.navigateBack({
					delta: 1
				});
			}


		}
	}
</script>

<style lang="scss">
	.class-type{
		width:100%;
		padding-left: 30%;
	}
	// 订单分类弹窗
	.alert-pip{
		width:750rpx;
		position: fixed;
		bottom: 0;
		left:0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index:99996;
		
		.pip-text{
			position: absolute;
			top:0;
			left:0;
			z-index:99999;
			background-color: white;
			width:100%;
			padding-bottom: 20rpx;
			border-radius:0 0 32rpx 32rpx;
			// height:200rpx;
			
			.pip-item{
				padding:0 32rpx;
				.item{
					width: 156rpx;
					height: 65rpx;
					text-align: center;
					background: #EEEEEE;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 65rpx;
					color: #707070;
					margin:25rpx 36rpx;
				}
				
				
				
			}
			
		}
		
		
		
	}
	
	
	
	.order {
		width: 750rpx;
		padding-top: 116rpx;
		
		// 订单列表
		.order-item{
			width: 686rpx;
			height: 264rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			margin-top: 25rpx;
			
			.item-top{
				width:100%;
				height:180rpx;
				padding: 24rpx;
				.top-img{
					width: 132rpx;
					height: 132rpx;
					border-radius: 8rpx;
				}
				.top-text{
					padding-left: 20rpx;
					flex:1;
					.text1{
						width:100%;
						.one{
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							line-height: 45rpx;
							color: #333333;
						}
						.two{
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							line-height: 45rpx;
							color: #333333;
						}
					}
					.text2{
						width:100%;
						.one{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 33rpx;
							color: #999999;
						}
						.two{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 33rpx;
							color: #999999;
						}
						
					}
				}
			}
			
			.item-bottom{
				width:100%;
				height:84rpx;
				.btn1{
					flex:1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40rpx;
					color: #999999;
					line-height: 84rpx;
					padding-left: 24rpx;
				}
				.btn2{
					flex:3;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 33rpx;
					color: #DC2D20;
					line-height: 84rpx;
				}
				.btn3{
					flex:2;
					
					.btn-status{
						display: inline-block;
						width: 170rpx;
						height: 58rpx;
						text-align: center;
						background: #DC2D20;
						border-radius: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 58rpx;
						color: #FFFFFF;
					}
					
					
				}
			}
			
			
		}

	}

	.choose-tab {
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		z-index: 9999;
		line-height: 116rpx;
		text-align: center;
		color: #999999;
		position: fixed;
		left: 0;

		.top-img {
			position: absolute;
			top: 0;
			left: 0;
		}

		.tab-item {
			position: relative;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #999999;
		}

		.active {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #DC2D20;
		}
	}
</style>
